﻿<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
    <title>易淘商城--秒杀详情页</title>
    <link rel="icon" href="/assets/img/favicon.ico">


    <link rel="stylesheet" type="text/css" href="css/webbase.css" />
    <link rel="stylesheet" type="text/css" href="css/pages-zoom.css" />
    <link rel="stylesheet" type="text/css" href="css/pages-seckill-item.css" />
    <link rel="stylesheet" type="text/css" href="css/widget-cartPanelView.css" />
</head>

<body>
    <script type="text/javascript" src="js/plugins/jquery/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#service").hover(function () {
                $(".service").show();
            }, function () {
                $(".service").hide();
            });
            $("#shopcar").hover(function () {
                $("#shopcarlist").show();
            }, function () {
                $("#shopcarlist").hide();
            });

        })
    </script>
    <script type="text/javascript" src="js/czFunction.js"></script>
    <script type="text/javascript" src="js/plugins/jquery.easing/jquery.easing.min.js"></script>
    <script type="text/javascript" src="js/plugins/sui/sui.min.js"></script>
    <script type="text/javascript" src="js/layer/layer.js"></script>
    <script type="text/javascript">
        $(function () {
            $("ul.btn-choose li a.btn-xlarge").click(function () {
                alert("钻中");
            });
            $("#star").click(function () {
                alert("关注成功");
            })
        })
    </script>
    <script src="./js/vue/vue.js"></script>
    <script src="./js/axios.min.js"></script>
    <script src="./js/common.js"></script>
</body>
<div id="seckillDetailApp">
    <div id="nav-bottom">
        <yt-top />
    </div>

    <div class="py-container">
        <div id="item">
            <div class="crumb-wrap">
                <ul class="sui-breadcrumb">
                </ul>
            </div>
            <!--product-info-->
            <div class="product-info">
                <div class="fl preview-wrap">
                    <!--放大镜效果-->
                    <div class="zoom">
                        <!--默认第一个预览-->
                        <div id="preview" class="spec-preview">
                            <span class="jqzoom"><img jqimg="goods.image" :src="goods.image" width="400px" height="400px" /></span>
                        </div>
                    </div>

                </div>
                <div class="fr itemInfo-wrap">
                    <div class="sku-name">
                        <h4>{{goods.title}}</h4>
                    </div>
                    <div class="news">
                        <span><img src="img/_/clock.png" />易淘秒杀</span>
                        <span class="overtime">距离结束：{{countTime}}</span>
                    </div>
                    <div class="summary">
                        <div class="summary-wrap">

                            <div class="fl title">
                                <i>秒杀价</i>
                            </div>
                            <div class="fl price">
                                <i>¥</i>
                                <em id="sekillPrice">{{yt.formatPrice(goods.seckillPrice)}}</em>
                                <span style="text-decoration:line-through">原价：{{yt.formatPrice(goods.price)}}</span>
                            </div>
                            <div class="fr remark">
                                剩余库存:{{goods.stock}}
                            </div>
                        </div>
                        <div class="summary-wrap">
                            <div class="fl title">
                                <i>促　　销</i>
                            </div>
                            <div class="fl fix-width">
                                <i class="red-bg">加价购</i>
                                <em class="t-gray">满999.00另加20.00元，或满1999.00另加30.00元，或满2999.00另加40.00元，即可在购物车换购热销商品</em>
                            </div>
                        </div>
                    </div>
                    <div class="support">
                        <div class="summary-wrap">
                            <div class="fl title">
                                <i>支　　持</i>
                            </div>
                            <div class="fl fix-width">
                                <em class="t-gray">以旧换新，闲置手机回收  4G套餐超值抢  礼品购</em>
                            </div>
                        </div>
                        <div class="summary-wrap">
                            <div class="fl title">
                                <i>配 送 至</i>
                            </div>
                            <div class="fl fix-width">
                                <em class="t-gray">满999.00另加20.00元，或满1999.00另加30.00元，或满2999.00另加40.00元，即可在购物车换购热销商品</em>
                            </div>
                        </div>
                    </div>
                    <div class="clearfix choose">
                        <div class="summary-wrap">
                            <div class="fl title">

                            </div>
                            <div class="fl">
                                <ul class="btn-choose unstyled">
                                    <li>
                                        <img id="verifyCodeImg" :src="verifyImage" width="80" height="32" v-show="flag" @click="refreshVerifyCode(goods.skuId)" />
                                        <input id="verifyCode" v-model="verifyCode" class="form-control" v-show="flag" style="width: 40px;height:26px;" />
                                        <a href="javascript:;" target="_self" class="sui-btn  btn-danger addshopcar" @click="getSecKillPath(goods.skuId)">立即抢购</a>
                                    </li>
                                    <span v-text="msg" style="color: red"></span>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--product-detail-->
            <div class="clearfix product-detail">
                <div class="fl aside">
                    <div class="shop">
                        <span class="fl">三星旗舰店</span><span class="fr"><a href="shop.html" target="_blank" class="sui-btn btn-bordered btn-danger">进入店铺</a></span>
                    </div>
                    <div class="clearfix"></div>
                    <ul class="sui-nav nav-tabs tab-wraped">
                        <li class="active">
                            <a href="#index" data-toggle="tab">
                                <span>相关分类</span>
                            </a>
                        </li>
                        <li>
                            <a href="#profile" data-toggle="tab">
                                <span>推荐品牌</span>
                            </a>
                        </li>
                    </ul>
                    <div class="tab-content tab-wraped">
                        <div id="index" class="tab-pane active">
                            <ul class="part-list unstyled">
                                <li>手机</li>
                                <li>手机壳</li>
                                <li>内存卡</li>
                                <li>Iphone配件</li>
                                <li>贴膜</li>
                                <li>手机耳机</li>
                                <li>移动电源</li>
                                <li>平板电脑</li>
                            </ul>
                            <ul class="goods-list unstyled">
                                <li>
                                    <div class="list-wrap">
                                        <div class="p-img">
                                            <img src="img/_/part01.png" />
                                        </div>
                                        <div class="attr">
                                            <em>Apple苹果iPhone 6s (A1699)</em>
                                        </div>
                                        <div class="price">
                                            <strong>
                                                <em>¥</em>
                                                <i>6088.00</i>
                                            </strong>
                                        </div>
                                        <div class="operate">
                                            <a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
                                        </div>
                                    </div>
                                </li>
                                <li>
                                    <div class="list-wrap">
                                        <div class="p-img">
                                            <img src="img/_/part02.png" />
                                        </div>
                                        <div class="attr">
                                            <em>Apple苹果iPhone 6s (A1699)</em>
                                        </div>
                                        <div class="price">
                                            <strong>
                                                <em>¥</em>
                                                <i>6088.00</i>
                                            </strong>
                                        </div>
                                        <div class="operate">
                                            <a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
                                        </div>
                                    </div>
                                </li>
                                <li>
                                    <div class="list-wrap">
                                        <div class="p-img">
                                            <img src="img/_/part03.png" />
                                        </div>
                                        <div class="attr">
                                            <em>Apple苹果iPhone 6s (A1699)</em>
                                        </div>
                                        <div class="price">
                                            <strong>
                                                <em>¥</em>
                                                <i>6088.00</i>
                                            </strong>
                                        </div>
                                        <div class="operate">
                                            <a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
                                        </div>
                                    </div>
                                    <div class="list-wrap">
                                        <div class="p-img">
                                            <img src="img/_/part02.png" />
                                        </div>
                                        <div class="attr">
                                            <em>Apple苹果iPhone 6s (A1699)</em>
                                        </div>
                                        <div class="price">
                                            <strong>
                                                <em>¥</em>
                                                <i>6088.00</i>
                                            </strong>
                                        </div>
                                        <div class="operate">
                                            <a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
                                        </div>
                                    </div>
                                    <div class="list-wrap">
                                        <div class="p-img">
                                            <img src="img/_/part03.png" />
                                        </div>
                                        <div class="attr">
                                            <em>Apple苹果iPhone 6s (A1699)</em>
                                        </div>
                                        <div class="price">
                                            <strong>
                                                <em>¥</em>
                                                <i>6088.00</i>
                                            </strong>
                                        </div>
                                        <div class="operate">
                                            <a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <div id="profile" class="tab-pane">
                            <p>推荐品牌</p>
                        </div>
                    </div>
                </div>
                <div class="fr detail">

                    <div class="tab-main intro">
                        <ul class="sui-nav nav-tabs tab-wraped">
                            <li class="active">
                                <a href="#one" data-toggle="tab">
                                    <span>商品介绍</span>
                                </a>
                            </li>
                            <li>
                                <a href="#two" data-toggle="tab">
                                    <span>规格与包装</span>
                                </a>
                            </li>
                            <li>
                                <a href="#three" data-toggle="tab">
                                    <span>售后保障</span>
                                </a>
                            </li>
                            <li>
                                <a href="#four" data-toggle="tab">
                                    <span>商品评价</span>
                                </a>
                            </li>
                            <li>
                                <a href="#five" data-toggle="tab">
                                    <span>手机社区</span>
                                </a>
                            </li>
                        </ul>
                        <div class="clearfix"></div>
                        <div class="tab-content tab-wraped">
                            <div id="one" class="tab-pane active">
                                <ul class="goods-intro unstyled">
                                </ul>
                            </div>
                            <div id="two" class="tab-pane">
                                <p>规格与包装</p>
                            </div>
                            <div id="three" class="tab-pane">
                                <p>售后保障</p>
                            </div>
                            <div id="four" class="tab-pane">
                                <p>商品评价</p>
                            </div>
                            <div id="five" class="tab-pane">
                                <p>手机社区</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    var userId = jwtGetUserId();
    var verifyCodeUrl = axios.defaults.baseURL + "/seckill/verifyCode/" + yt.getUrlParam("goodsId") + "/" + userId;

    var seckillDetailVm = new Vue({
        el: "#seckillDetailApp",
        data: {
            yt,
            verifyCode: '',
            verifyImage: '',
            msg: '',
            flag: true, // 显示验证码
            countTime: {},
            goods: {},
            tip: '', // 提示结果
        },
        created: function () {
            yt.http.get("/seckill/" + yt.getUrlParam("goodsId"))
                .then((resp) => {
                    this.goods = resp.data;
                    // 服务端当前时间：
                    let startSeconds = new Date(this.goods.currentTime).getTime();
                    // 结束时间:
                    let endSeconds = new Date(this.goods.endTime).getTime();
                    let seconds = Math.floor((endSeconds - startSeconds) / 1000);

                    const time = setInterval(() => {
                        seconds = seconds - 1;
                        this.countTime = this.convertTimeString(seconds);

                        if (seconds <= 0) {
                            clearInterval(time);
                        }
                    }, 1000);
                });
            // 获取验证图片
            var userId = jwtGetUserId();
            this.verifyImage = verifyCodeUrl;// axios.defaults.baseURL + "/seckill/verifyCode/" + yt.getUrlParam("goodsId") + "/" + userId;
        },
        methods: {
            //转换秒为天小时分钟秒格式  XXX天 10:22:33
            convertTimeString(timeSeconds) {
                let days = Math.floor(timeSeconds / (60 * 60 * 24));//天数
                let hours = Math.floor((timeSeconds - days * 60 * 60 * 24) / (60 * 60));//小数数
                let minutes = Math.floor((timeSeconds - days * 60 * 60 * 24 - hours * 60 * 60) / 60);//分钟数
                let seconds = timeSeconds - days * 60 * 60 * 24 - hours * 60 * 60 - minutes * 60; //秒数
                let timeString = "";
                // 0补全2位
                hours = hours < 10 ? "0" + hours : hours;
                minutes = minutes < 10 ? "0" + minutes : minutes;
                seconds = seconds < 10 ? "0" + seconds : seconds;

                if (days > 0) {
                    timeString = days + "天 ";
                }
                return timeString + hours + ":" + minutes + ":" + seconds;
            },
            // 获取秒杀地址
            getSecKillPath(goodsId) {
                yt.http.post("/seckill/getPath", {
                    goodsId: goodsId,
                    verifyCode: this.verifyCode
                }).then((resp) => {
                    if (resp.data.result) {
                        this.tip = resp.data.value.path;
                        this.doSecKill(this.tip, goodsId);   // 真正执行秒杀
                    } else {
                        layer.msg(resp.data.message);
                        this.refreshVerifyCode(goodsId);
                    }
                });
            },
            // 执行秒杀--全Redis操作--真的完全靠谱？不一定！
            doSecKill(path, goodsId) {
                yt.http.post("/seckill/" + path + "/seck/" + goodsId)
                    .then((resp) => {
                        if (resp.data.result) {
                            // 获取秒杀结果
                            this.getSecKillResult(goodsId);
                        } else {
                            layer.msg(resp.data.message);
                            this.refreshVerifyCode(goodsId);
                        }
                    });
            },
            // 获取秒杀结果
            getSecKillResult(goodsId) {
                let loading = layer.load(1, {
                    shade: [0.1, '#fff'] //0.1透明度的白色背景
                });
                //3.2开启定时任务，查询秒杀订单状态
                const taskId = setInterval(() => {
                    yt.http.get("/seckill/result/" + goodsId, {
                        transformResponse: [
                            function (data) {
                                return data;
                            }
                        ]
                    }).then(resp => {
                        var data = JSON.parse(resp.data);
                        if (!data.result) {
                            return;
                        }
                        let orderId = data.value.orderId;
                        console.log(resp);
                        console.log(orderId);

                        if (orderId != "undefined" || orderId != -1) {
                            //3.5秒杀成功
                            clearInterval(taskId);
                            layer.close(loading);
                            layer.confirm("恭喜你，秒杀成功！查看订单？", { btn: ["确定", "取消"] },
                                function () {
                                    yt.store.set("totalPay", $("#sekillPrice").text());
                                    yt.store.set("orderId", orderId);
                                    window.location.href = "/pay.html";
                                },
                                function () {
                                    layer.closeAll();
                                });
                        } else {
                            layer.close(loading);
                            //3.5秒杀失败
                            clearInterval(taskId);
                            layer.msg("对不起，秒杀失败");
                        }
                    }).catch(() => { layer.msg("对不起，秒杀失败") });
                }, 3000);
            },
            refreshVerifyCode(goodsId) {
                this.verifyImage = verifyCodeUrl + "?timestamp=" + new Date().getTime();
                //"http://192.168.3.199:5000/verifyCode/" + goodsId + "?timestamp=" + new Date().getTime();
            }
        },
        components: {
            ytTop: () => import("./js/pages/top.js")
        }
    });
</script>
<!-- 底部栏位 -->
<!--页面底部，由js动态加载-->
<div class="clearfix footer"></div>
<script type="text/javascript">$(".footer").load("foot.html");</script>
<!--页面底部END-->
<!--侧栏面板开始,由js动态加载-->
<script type="text/javascript" src="plugins/jquery/jquery.min.js"></script>
<div class="J-global-toolbar"></div>
<script type="text/javascript">$(".J-global-toolbar").load("side.html");</script>

<!--购物车单元格 模板-->
<script type="text/template" id="tbar-cart-item-template">
    <div class="tbar-cart-item">
        <div class="jtc-item-promo">
            <em class="promo-tag promo-mz">满赠<i class="arrow"></i></em>
            <div class="promo-text">已购满600元，您可领赠品</div>
        </div>
        <div class="jtc-item-goods">
            <span class="p-img"><a href="#" target="_blank"><img src="{2}" alt="{1}" height="50" width="50" /></a></span>
            <div class="p-name">
                <a href="#">{1}</a>
            </div>
            <div class="p-price"><strong>¥{3}</strong>×{4} </div>
            <a href="#none" class="p-del J-del">删除</a>
        </div>
    </div>
</script>
<!--侧栏面板结束-->
</html>